Skip to content

Conversation

@joshuajay
Copy link
Contributor

@joshuajay joshuajay commented Sep 9, 2019

WHY are these changes introduced?

WHAT is this pull request doing?

Max-width on large screens

Reducing the max-width of the search results overlay by 6px to match the max-width of the search bar.

Before After
Screen Shot 2019-09-10 at 9 39 45 AM Screen Shot 2019-09-10 at 9 41 12 AM

Max-height on small screens

Increasing the max-height of the search results overlay so it fills the entire screen on small devices.

Before After
Screen Shot 2019-09-10 at 9 41 46 AM Screen Shot 2019-09-10 at 9 42 31 AM

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:
import React from 'react';
import {Frame, TopBar} from '../src';

export function Playground() {
  const searchResults = (
    <div
      style={{
        backgroundColor: 'white',
        height: 3000,
      }}
    >
      Test results..
    </div>
  );

  const topBar = (
    <TopBar
      searchField={<TopBar.SearchField value="Test.." onChange={() => {}} />}
      searchResults={searchResults}
      searchResultsVisible
    />
  );

  return <Frame topBar={topBar} />;
}

🎩 checklist

cc/ @benluii

@joshuajay joshuajay self-assigned this Sep 9, 2019
@joshuajay joshuajay marked this pull request as ready for review September 10, 2019 14:13
Copy link
Contributor

@dleroux dleroux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎩 in web. Works as expected. :shipit:

@joshuajay joshuajay merged commit 279e826 into master Sep 11, 2019
@joshuajay joshuajay deleted the search-overlay-adjustment branch September 11, 2019 17:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants